use dioxus::prelude::*;

use crate::{components::clear::Clear, utils::cookie_store::CookieStore};

#[component]
pub fn CookieFormat() -> Element {
    let mut cookie_input = use_signal(|| String::new());
    let mut parsed_table = use_signal(|| Vec::<(String, String)>::new());

    let mut parse_cookie = move || {
        let Ok(store) = cookie_input.read().parse::<CookieStore>() else {
            return;
        };
        let new_table = store
            .cookies
            .iter()
            .map(|(k, v)| (k.clone(), v.clone()))
            .collect::<Vec<_>>();
        parsed_table.set(new_table);
    };

    use_memo(move || {
        if cookie_input.read().is_empty() {
            parsed_table.set(Vec::new())
        }
    });

    rsx! {
        div { class: "flex-1 flex flex-col",
            div { class: "flex-1 p-8 overflow-auto",
                div { class: "max-w-4xl mx-auto space-y-6",
                    div { class: "space-y-2",
                        h1 { class: "text-2xl font-bold text-gray-900", "Cookie 格式化" }
                        p { class: "text-gray-600", "粘贴原始 Cookie 字符串并解析为键值对表格。" }
                    }
                    div { class: "bg-card text-card-foreground border border-gray-200 rounded-2xl shadow-sm",
                        div { class: "p-6",
                            div { class: "space-y-4",
                                div { class: "space-y-2",
                                    label { class: "text-sm font-medium text-gray-700", "粘贴 Cookie：" }

                                    textarea {
                                        oninput: move |e| cookie_input.set(e.value()),
                                        value: cookie_input,
                                        spellcheck: "false",
                                        autocapitalize: "off",
                                        autocomplete: "off",
                                        placeholder: "SESSIONID=abc123; token=xyz456; theme=dark",
                                        class: "flex w-full border bg-background px-3 py-2 ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 min-h-[120px] rounded-xl border-gray-200 resize-none font-mono text-sm",
                                    }
                                }
                            }

                            div { class: "flex items-center space-x-3 mt-6",
                                button {
                                    onclick: move |_| parse_cookie(),
                                    class: "inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [\u{0026}amp;_svg]:pointer-events-none [\u{0026}amp;_svg]:size-4 [\u{0026}amp;_svg]:shrink-0 h-10 bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-xl transition-all duration-200",
                                    "解析"
                                }

                                Clear {
                                    targets: vec![cookie_input.clone()],
                                }
                            }
                        }
                    }

                    if !&parsed_table.read().is_empty() {
                        div { class: "bg-white border border-gray-200 rounded-2xl shadow-sm",
                            div { class: "p-6 overflow-x-auto",
                                h2 { class: "text-lg font-semibold text-gray-900 mb-4", "解析结果：" }

                                table {
                                    class: "min-w-full text-sm table-auto border rounded-md overflow-hidden",
                                    thead {
                                        tr { class: "bg-gray-100 border-b",
                                            th { class: "text-left font-semibold text-gray-800 pr-4 py-2", "Key" }
                                            th { class: "text-left font-semibold text-gray-800 py-2", "Value" }
                                        }
                                    }
                                    tbody {
                                        for (i, (key, val)) in parsed_table.read().iter().enumerate() {
                                            tr {
                                                class: if i % 2 == 0 {
                                                    "bg-white hover:bg-gray-50"
                                                } else {
                                                    "bg-gray-50 hover:bg-gray-100"
                                                },
                                                td { class: "text-gray-900 pr-4 py-2", "{key}" }
                                                td { class: "text-gray-700 py-2", "{val}" }
                                            }
                                        }
                                    }
                                }


                            }
                        }
                    }
                }
            }
        }
    }
}
